<template>
  <view class="page">
    <view class="header c-font-s1 c-color-u1">
      <view class="header-item c-font-s2 u-border-bottom">基础信息</view>
      <view class="header-item u-border-bottom">
        <view class="c-color-u2">店面信息：</view>
        <view class="txt">马克菠萝砖面的时间偶就都是觉得扫地机深度理解了</view>
      </view>
      <view class="header-item">
        <view class="c-color-u2">助店人员：</view>
        <view class="txt">刘瑞琪</view>
      </view>
    </view>

    <view class="content">
      <view class="collapse-wrapper c-font-s1">
        <view class="collapse-item u-border-bottom">
          <view class="lt c-font-s2 c-color-u1 c-font-bold">助店任务</view>
          <view class="rt">
            <u-icon :name="open ? 'arrow-down' : 'arrow-up'"
                    size="24"></u-icon>
          </view>
        </view>
        <view class="collapse-item u-border-bottom">
          <view class="lt c-font-bold c-color-u1">
            <text style="color: red;">*</text>
            我司上月份额(%)
          </view>
          <view class="rt">
            <u-input v-model="comptVal"
                     placeholder="填写100以内的数字"
                     :placeholder-style="placeholdStyle"></u-input>
          </view>
        </view>
        <view class="collapse-item u-border-bottom">
          <view class="lt c-font-bold c-color-u1">
            <text style="color: red;">*</text>
            我司份额排名
          </view>
          <view class="rt">
            <u-input v-model="val2"
                     placeholder="填写10以内的数字"
                     :placeholder-style="placeholdStyle"></u-input>
          </view>
        </view>
        <view class="collapse-item u-border-bottom">
          <view class="lt c-font-bold c-color-u1">
            <text style="color: red;">*</text>
            本品类合作品牌数
          </view>
          <view class="rt">
            <u-input v-model="val2"
                     placeholder="填写数字"
                     :placeholder-style="placeholdStyle"></u-input>
          </view>
        </view>
        <view class="collapse-item u-border-bottom">
          <view class="lt c-font-bold c-color-u1">
            <text style="color: red;">*</text>
            是否上星选产品
          </view>
          <view class="rt">
            <u-radio-group v-model="value"
                           @change="radioGroupChange">
              <u-radio v-for="(item, index) in radioList"
                       :key="index"
                       :name="item.name"
                       shape="circle">
                {{item.name}}
              </u-radio>
            </u-radio-group>
          </view>
        </view>
        <!-- Activity -->
        <view class="collapse-item u-border-bottom">
          <view class="lt c-font-bold c-color-u1">
            活动主题任务
          </view>
          <view class="rt">
            <text class="c-color-u4" @click="popVisible = true, popTag = 0">选择主题</text>
          </view>
        </view>
        <view class="collapse-item u-border-bottom">
          <view class="lt c-font-bold c-color-u1">
            其他主题任务
          </view>
          <view class="rt"
                @click="popVisible = true, popTag = 1">
            <text class="c-color-u4">选择主题</text>
          </view>
        </view>
        <commonList :pop-tag="0" :originData="testData"></commonList>
      </view>
    </view>
    <u-popup v-model="popVisible"
             mode="bottom"
             :mask="true"
             :mask-close-able="true"
             border-radius="0"
             @open="activityLoad"
             @close="activityCloseFF">
      <view class="pop-wrapper">
        <view class="pop-title">选择要维护的主题</view>
        <view class="pop-list">
          <view v-for="(item, index) in comptList" :key="index" class="pop-item c-color-u1 c-font-s2" :class="{'active': item.checked}">
            <view class="lt">
              装期高层关系维护
            </view>
            <view class="rt">
              <u-checkbox-group>
                <u-checkbox @change="checkboxChange(item)"
                            v-model="item.checked"
                            shape="circle"></u-checkbox>
              </u-checkbox-group>
            </view>
          </view>
        </view>
        <view class="pop-footer">
          <view class="footer-item">
            <u-button shape="circle" :custom-style="{background:'#F6F6F6'}" @click="popVisible = false">取消</u-button>
          </view>
          <view class="footer-item">
            <u-button type="primary" shape="circle">确认</u-button>
          </view>
        </view>
      </view>
    </u-popup>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import commonList from './commonList.vue'
import {
  getCreateTaskForm
} from '../../common/service.js'
export default {
  components: {
    commonList
  },
  data() {
    return {
      open: false,
      placeholdStyle: '#999',
      val1: '',
      val2: '',
      val3: '',
      value: '是',
      radioList: [{ name: '是' }, { name: '否' }],
      popList: [{}],
      popVisible: false,
      popTag: 0,
      activityList: [
        {name: '装起高层关系维护', checked: false},
        {name: '参加装起组织的会议', checked: false},
        {name: '装起客户的协助处理', checked: false},

      ],
      otherActivityList: [],
      testData: {remark: '测试内容', imgList: [], videoList: []}
      
    }
  },
  methods: {
    radioGroupChange(e) {
      // console.log(e);
    },
    radioChange(e) {
      // console.log(e);
    },
    commonRequest(requestFunc, params) {
      return new Promise((resolve, reject) => {
        uni.showLoading({
          title: '加载中...',
          mask: true
        })
        const callback = (res, err) => {
          if (res.data?.code === 200) {
            uni.hideLoading()
            resolve(res.data.data)
          } else {
            uni.showToast({
              title: res.data?.message || '请求失败',
              icon: 'none',
              duration: 2000
            })
            uni.hideLoading()
            reject(res)
          }
        }
        requestFunc(params, callback)
      })
    },
    async initPage() {
      const res = this.commonRequest(getCreateTaskForm, {id: -3826677566962251963})
    }
  },
  computed: {
    comptVal(val) {
      return 1
    },
    comptList() {
      return this.popTag === 0 ? this.activityList : this.otherActivityList
    }
  },
  onLoad() {
    console.log('1')
    this.initPage()
  }
}
</script>

<style lang="scss" scoped>
$colors: (
  'u1': #333,
  'u2': #666,
  'u3': #999,
  'u4': #307dcd,
  'u5': #f3f5f7,
  'u6': #e6f7ff,
);
$fonts: (
  's1': 28rpx,
  's2': 30rpx,
  's3': 32rpx,
);
@each $key, $val in $colors {
  .c-color-#{$key} {
    color: $val;
  }
}
@each $key, $val in $fonts {
  .c-font-#{$key} {
    font-size: $val;
  }
}
.c-font-bold {
  font-weight: bold;
}
.page {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #f3f5f7;
  // margin塌陷
  overflow: hidden;
}
uni-page-body {
  background: #f3f5f7;
  min-height: 100%;
}
.header {
  background: #fff;
  margin: 20rpx;
  padding: 0 20rpx;
  border-radius: 10rpx;
  &-item {
    display: flex;
    align-items: center;
    min-height: 80rpx;
    padding: 20rpx 0;
    &:nth-child(2) {
      align-items: flex-start;
    }
    .txt {
      flex: 1 0 80%;
    }
  }
}
.content {
  margin: 0 20rpx;
  .collapse-wrapper {
    border-radius: 10rpx;
    overflow: hidden;
    background: #fff;
  }
  .collapse-item {
    background: #fff;
    display: flex;
    justify-content: space-between;
    min-height: 98rpx;
    align-items: center;
    padding: 20rpx;
    margin: 0 20rpx;
    .lt {
      flex: 1 0 60%;
    }
  }
}
.list {
  background: #fff;
  // 关联滚动，缺少无法滚动
  max-height: calc(100vh - 220rpx);
  overflow: hidden auto;
  &-item {
    height: 110rpx;
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    box-sizing: border-box;
  }
}

.pop-wrapper {
  min-height: 120rpx;
  background: #fff;
  .pop-title {
    font-size: 36rpx;
    width: 100%;
    text-align: center;
    font-weight: 500;
    color: #333;
    padding-top: 50rpx;
  }
  .pop-list {
    padding: 30rpx 30rpx;
  }
  .pop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30rpx;
    min-height: 100rpx;
    border-radius: 8rpx;
    margin-bottom: 10rpx;
    background: #e6f7ff;
    .rt {
      margin-right: -20rpx;
    }
    &.active {
      border: solid 1rpx #307dcd;
    }
  }
  .pop-footer {
    display: flex;
    justify-content: space-around;
    padding: 30rpx;
    .footer-item {
      flex: 0 0 45%;
    }
  }
}
</style>
